<% use crate::utils::urls; %>
<turbo-frame id="project">
  <div class="notebook">
    <section>
      <h2><span class="material-symbols-outlined">model_training</span>Models</h2>
      <ol class="object_list model_list">
        <li>
            <span></span>
            <span><b>Algorithm</b></span>
            <span><b><%- project.key_metric_display_name().unwrap() %></b></span>    
            <figure></figure>
        </li>
        <% for model in models.iter() { %>
        <li>
          <a href="<%- urls::deployment_model_by_id(model.id) %>" data-turbo-frame="_top">
            <span class="material-symbols-outlined d-flex justify-content-center align-items-center">
              <% if model.search.is_some() { %>
                <% if model.search.as_ref().unwrap().as_str() == "grid" { %>
                  grid_on
                <% } %>
                <% if model.search.as_ref().unwrap().as_str() == "random" { %>
                  shuffle
                <% } %>
              <% } else { %>
                check_circle
              <% } %>
            </span>
            <span class="ps-2"><%= model.algorithm %></span>
            <span><%= format!("{:.4}", model.key_metric(&project).unwrap()) %></span>
            <figure id="model_<%= model.id %>"></figure>
          </a>
        </li>
        <% } %>
      </ol>
    </section>
  </div>
  
  <script defer type="module">
    import { renderModel } from '@postgresml/main';
  
    function renderCharts() {
    <% for model in models.iter() { %>
       renderModel(<%= model.id %>, <%= model.key_metric(&project).unwrap() %>, [0, 1]);
    <% } %>
    };
    renderCharts();
  </script>
</turbo-frame>
